<template>
  <a-input placeholder="搜索" style="margin-bottom: 20px; width: 80%">
    <template #prefix>
      <icon-search />
    </template>
  </a-input>
  <a-checkbox-group v-model:model-value="checkedGroup" @change="change">
    <a-space direction="vertical" fill>
      <template v-for="item in props.list" :key="item[props.fieldNames.idName]">
        <a-checkbox :value="item[props.fieldNames.idName]">
          <template #checkbox="{ checked }">
            <a-space
              align="start"
              class="custom-checkbox-card"
              :class="{ 'custom-checkbox-card-checked': checked }"
            >
              <div className="custom-checkbox-card-mask">
                <div className="custom-checkbox-card-mask-dot" />
              </div>
              <a-space size="small">
                <a-avatar
                  :size="40"
                  shape="square"
                  :style="{ backgroundColor: '#00d0b6' }"
                >
                  <img
                    alt="avatar"
                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
                  />
                </a-avatar>
                <span
                  >{{ item[props.fieldNames.lableName]
                  }}{{ item[props.fieldNames.idName] }}</span
                >
              </a-space>
            </a-space>
          </template>
        </a-checkbox>
      </template>
    </a-space>
  </a-checkbox-group>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    list: any[];
    fieldNames?: {
      idName: string;
      lableName: string;
    };
  }>(),
  {
    fieldNames: () => ({
      idName: 'id',
      lableName: 'name'
    })
  }
);

const checkedGroup = ref<any[]>([]);
const change = (e: any) => {
  console.log(e);
};
</script>

<style scoped>
.custom-checkbox-card {
  padding: 10px 16px;
  /* border: 1px solid var(--color-border-2); */
  border-radius: 4px;
  width: 250px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.custom-checkbox-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-checkbox-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.custom-checkbox-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.custom-checkbox-card:hover,
.custom-checkbox-card-checked,
.custom-checkbox-card:hover .custom-checkbox-card-mask,
.custom-checkbox-card-checked .custom-checkbox-card-mask {
  border-color: #07c160;
}

.custom-checkbox-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-checkbox-card:hover .custom-checkbox-card-title,
.custom-checkbox-card-checked .custom-checkbox-card-title {
  color: rgb(var(--primary-6));
}

.custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
  background-color: #07c160;
}
</style>
